<template>
  <div class="wrapper">
    <input type="text" class="input" placeholder='请输入关键字'>
    <div class="searchbtn">
      <el-icon>
        <Search />
      </el-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>

</script>

<style lang='scss'>
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');

* {
  margin: 0;
  /* 外边距 */
  padding: 0;
  /* 内边距 */
  outline: none;
  /* 选择时无选框 */
  box-sizing: border-box;
  /* 盒大小规则 */
  /* 字体 */
}

.wrapper {
  max-width: 555px;
  /* 最大宽度 */
  width: 100%;
  padding: 15px;
  border-radius: 5px;
  /* 边框圆角 */
  position: relative;
}

.wrapper .input {
  width: 100%;
  padding: 25px 20px;
  border: none;
  border-radius: 35px;
  font-weight: bold;


  /* 字体粗度 */
  &::placeholder {
    font-size: 21px;
  }
}

// 线性渐变
.searchbtn {
  background: linear-gradient(to right, #5BA3FB, #3A8EF5, #086FED);
  width: 20%;
  height: calc(100% - 40px);
  border-radius: 35px;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}

.searchbtn .el-icon {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: #fff;
}
</style>